<template>
    <div class="container">
      <div class="tips-title">1.基础表格</div>
      <el-row :gutter="5">
        <el-col :span="12">
          <div class="tips-title-sub">默认</div>
          <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <div class="tips-title-sub">带斑马纹表格 stripe </div>
          <el-table :data="tableData" stripe>
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <div class="tips-title-sub">带边框表格 border </div>

          <el-table :data="tableData" border>
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <div class="tips-title-sub">带自定义状态表格</div>
          <el-table :data="tableData" :row-class-name="tableRowClassName">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div class="tips-title">2.固定列 固定表头 流体高度</div>
      <el-table :data="tableData2" max-height="250">
        <el-table-column fixed prop="id" label="ID"></el-table-column>
        <el-table-column prop="date" label="日期" width="160"></el-table-column>
        <el-table-column prop="name" label="姓名" width="160"></el-table-column>
        <el-table-column prop="province" label="省份" width="90"></el-table-column>
        <el-table-column prop="city" label="市区" width="90"></el-table-column>
        <el-table-column prop="address" label="地址" width="600"></el-table-column>
        <el-table-column prop="zip" label="邮编" width="160"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="deleteRow(scope.$index, tableData2)" type="text" size="small">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="tips-title">3.多级表头</div>
      <el-table :data="tableData2">
        <el-table-column prop="id" label="ID" width="40" align="center"></el-table-column>
        <el-table-column prop="date" label="日期" width="160" align="center"></el-table-column>
        <el-table-column label="配送信息" align="center">
          <el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>
          <el-table-column label="地址" align="center">
            <el-table-column prop="province" label="省份" width="120"></el-table-column>
            <el-table-column prop="city" label="市区" width="120"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="tips-title">4.单选 / 多选</div>
      <el-row :gutter="5">
        <el-col :span="12">
          <div >
            <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
            <el-button @click="setCurrent()">取消选择</el-button>
          </div>
          <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column property="date" label="日期" width="120"></el-table-column>
            <el-table-column property="name" label="姓名" width="120"></el-table-column>
            <el-table-column property="address" label="地址"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <div >
            <el-button @click="getSelectValue()">getData</el-button>
          </div>
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="日期" width="120">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div class="tips-title">5.排序</div>
      <el-table :data="tableData" :default-sort="{prop: 'date', order: 'descending'}">
        <el-table-column prop="date" label="日期" sortable></el-table-column>
        <el-table-column prop="name" label="姓名" sortable></el-table-column>
        <el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column>
      </el-table>
      <div class="tips-title">6.自定义列模板</div>
      <el-table :data="tableData">
        <el-table-column label="日期" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
</template>
<script>
  import ElRow from "element-ui/packages/row/src/row";

  const testData1 = [
    {date: '2020-05-11',name: 'bangZZ 1',address: '广州市白云区'},
    {date: '2019-05-10',name: 'bangZZ 2',address: '广州市花都区'},
    {date: '2018-05-9',name: 'bangZZ 3',address: '广州市天河区'}
  ];

  const testData2 = [
    {id: '1',date: '2020-05-03',name: 'bangZZ',province: '广东',city: '广州',address: '广州市花都区新华街',zip: 510800},
    {id: '2',date: '2020-05-02',name: 'bangZZ',province: '广东',city: '广州',address: '广州市白云区大金钟路',zip: 510000},
    {id: '3',date: '2020-05-01',name: 'bangZZ',province: '广东',city: '广州',address: '广州市白云区机场路1355号',zip: 510000},
    {id: '4',date: '2020-04-01',name: 'bangZZ',province: '上海',city: '浦东新区',address: '上海市浦东新区陆家嘴',zip: 200000},
    {id: '5',date: '2020-05-01',name: 'bangZZ',province: '上海',city: '黄埔区',address: '上海市黄埔区北京东路',zip: 200000},
    {id: '6',date: '2020-02-01',name: 'bangZZ',province: '上海',city: '黄埔区',address: '上海市浦东新区盛夏路',zip: 200000}
  ];

  export default {
    name: 'd-table',
    components: {ElRow},
    data() {
      return {
        tableData: testData1,
        tableData2: testData2,
        currentRow: null,
        multipleSelection: []
      }
    },
    methods: {
      // 1.
      tableRowClassName({row, rowIndex}) {
        if(rowIndex === 0) {
          return 'warning-row';
        } else if(rowIndex === 2) {
          return 'success-row';
        }
        return '';
      },
      // 2.
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      // 4.
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      getSelectValue() {
        console.log(this.multipleSelection);
      },
      // 5.
      formatter(row, column) {
        return row.address;
      },
      // 6.
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

